<template>
	<view>
		<view class="body">
			<view class="logo">
				<image src="../../static/logo.png" style="width: 200rpx;height: 200rpx;"></image>
			</view>
			<InputForm :type="login_id" ref='myComponent'></InputForm>
			<!-- <view class="card">
				<input type="number" v-model="id" placeholder="请输入账号..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="password" placeholder="请输入密码..." placeholder-class="text" />
			</view> -->
			<view class="btn" @tap="login">登录</view>

		</view>
		<view class="footer">
			<text class="">
				<text class="text" @click="retrievePassword">找回密码</text><text class="text"> | </text><text class="text"
					@click="register">新用户注册</text><text class="text"> | </text><text class="text"
					@click="login_phone">手机号邮箱登录</text>
			</text>
		</view>
	</view>
</template>

<script>
	import InputForm from "../../components/InputForm/InputForm.vue"
	import Valid from "../../config/valid.js"
	export default {
		components: {
			InputForm
		},
		// created() {
		// 	console.log(22222222222222222222)
		// },
		data() {
			return {
				id: "",
				password: "",
				login_id: "login_id"
			}
		},
		created() {
			uni.setStorage({
				key: 'cur_page',
				data: 'login_id'
			})
		},
		methods: {
			toJSON() {},
			login() {
				// console.log("login")
				let lst = this.$refs.myComponent.getlst()
				this.id = lst[0]
				this.password = lst[1]
				// console.log(lst)
				var rules = []
				//校验账号
				var check = Valid.check(rules)
				check.add(this.id, [{
					strategy: 'isNotEmpty',
					errorMsg: '账号不能为空'
				}]) //用户名是否存在提交之后统一判断
				var error = check.start()
				if (error !== undefined) {
					console.log(error)
					uni.showToast({
						icon: 'none',
						title: error
					})
					return
				}
				//校验密码
				rules = []
				var check = Valid.check(rules)
				check.add(this.password, [{
					strategy: 'isNotEmpty',
					errorMsg: '密码不能为空'
				}]) //用户名是否存在提交之后统一判断
				var error = check.start()
				if (error !== undefined) {
					console.log(error)
					uni.showToast({
						icon: 'none',
						title: error
					})
					return
				} else {
					this.$request.TokenRequest({
						url: "/user/login"
					}, {
						type: 0,
						id: this.id,
						password: this.password
					}).then(res => {
						console.log(res)
						if (res.state === 200) {
							console.log("登录成功")
							this.$store.commit("login", res.data);
							this.$socket.connectSocketInit();
							uni.switchTab({
								url: "../message/message"
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					}).catch(err => {
						console.log(err)
					})

				}
			},
			retrievePassword() {
				console.log('retrieve password')
				uni.navigateTo({
					url: "../retrieve/retrieve"
				})
			},
			register() {
				console.log('register')
				uni.navigateTo({
					url: '../register/register'
				})
			},
			login_phone() {
				console.log('login_phone')
				uni.navigateTo({
					url: "login_phone/login_phone"
				})
			}
		},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	.body {
		margin: 0 auto;
		padding-top: 340rpx;
		width: 85%;

		.logo {
			text-align: center;
			width: 100%;
			padding-bottom: 80rpx;
		}

		.btn {
			color: #FFFFFF;
			background-color: #6869a8;
			margin: 50rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;
			text-align: center;

			// width: 70%;

		}

		.card {
			background-color: #F5F5F5;
			margin: 70rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;

			// width: 70%;
			.text {
				font-size: 35rpx;
			}
		}

		.login {
			background-color: #007AFF;
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 120rpx;
			margin: 100rpx auto;
		}
	}

	.footer {
		width: 100%;
		position: absolute;
		bottom: 60rpx;
		text-align: center;

		.text {
			// font-weight: 600;
			font-size: 25rpx;
			margin: 0 15rpx;
		}
	}
</style>
